<template>
  <!--弹框组件-->
    <div>
      <div class='key-container'>
        <div class="telBox-container">
          <div class="title-container">
            <div class="input-container" v-if="phoneNumber != undefined">
              <div class='input-box'>{{ phoneNumber }}</div>
              <div class="del-right">
                <img @click="clearAll" class="bhpImg" src="@/assets/images/component/intercomGroup/bhpDelete.png" alt="">
              </div>
            </div>
          </div>
          <div class="bottom-line">
            <el-divider></el-divider>
          </div>
          <div class="keyboard-container">
            <div class='keyboard' @click.stop='_handleKeyPress'>
              <div class='key-row'>
                <div class='key-cell' data-num='1'>1</div>
                <div class='key-cell' data-num='2'>2</div>
                <div class='key-cell' data-num='3'>3</div>
              </div>
              <div class='key-row'>
                <div class='key-cell' data-num='4'>4</div>
                <div class='key-cell' data-num='5'>5</div>
                <div class='key-cell' data-num='6'>6</div>
              </div>
              <div class='key-row'>
                <div class='key-cell' data-num='7'>7</div>
                <div class='key-cell' data-num='8'>8</div>
                <div class='key-cell' data-num='9'>9</div>
              </div>
              <div class='key-row'>
                <div class='key-cell' data-num='*'>*</div>
                <div class='key-cell' data-num='0'>0</div>
                <div class='key-cell' data-num='#'>#</div>
              </div>
              <div class='key-rowBtn'>
                <div class=' ipVoice' data-num='IPVOICE'>呼叫</div>
<!--                <div class='key-cell' data-num='D'></div>-->
                <div class=' ipVoice' data-num='CLOSE'>关闭</div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>

</template>

<script>
  import $ from 'jquery'
  import '@/plugins/Tdrag/Tdrag'
  export default {
    name: 'test',
    props: {
      msg: String,
      states: Boolean,
      DialpadVisible: {
        type: Boolean,
        default: false
      }
    },
    data(){
      return{
        phoneNumber: '',
        //弹框
        IntercomGroup: false,
      }
    },
    mounted () {
      $(document).ready(function(){

        $(".div1").Tdrag();

      });
    },
    watch: {
      // 监听 DialpadVisible 改变
      DialpadVisible (oldVal, newVal) {
        this.IntercomGroup = this.DialpadVisible
      },
    },
    created () {

    },
    methods:{
      dragA(){
        console.log($)
        $(".div1").removeClass("div1")

      },
      // 弹出框关闭后触发
      handleClose () {
        // 子组件调用父组件方法，并传递参数
        this.$emit('changeDialpadShow', 'false')
      },
      close () {
        // 子组件调用父组件方法，并传递参数
        this.$emit('changeShow', 'false')
        this.phoneNumber = ''
      },
      //确定提交，调用父组件方法，传递数据
      handleConfirm(){
        this.$emit('DialpadchildConfirm', this.phoneNumber)
        this.IntercomGroup = false
        // this.chooseDatas = [];
      },
      //清除全部
      clearAll () {
        this._handleDeleteKey()
      },
      //处理按键
      _handleKeyPress (e) {
        let num = e.target.dataset.num
        //不同按键处理逻辑
        // -1 代表无效按键，直接返回
        if (num === -1) return false
        if (num === undefined) return false
        switch (String(num)) {
          //小数点
          case '.':
            this._handleDecimalPoint()
            break
          //删除键
          case 'D':
            this._handleDeleteKey()
            break
          //清空键
          case 'C':
            this._handleClearKey()
            break
          //确认键
          case 'QR':
            this._handleConfirmKey()
            break
          //呼叫键
          case 'IPVOICE':
            this._handleConfirmKey()
            break
          //关闭键
          case 'CLOSE':
            this.handleClose()
            break
          default:
            this._handleNumberKey(num)
            break
        }
      },
      //处理小数点函数
      _handleDecimalPoint () {
        //如果包含小数点，直接返回
        if (this.phoneNumber.indexOf('.') > -1) return false
        //如果小数点是第一位，补0
        if (!this.phoneNumber.length) {
          this.phoneNumber = '0.'
        }//如果不是，添加一个小数点
        else {
          this.phoneNumber = this.phoneNumber + '.'
        }
      },
      //处理删除键
      _handleDeleteKey () {
        let S = this.phoneNumber
        //如果没有输入，直接返回
        if (!S.length) return false
        //否则删除最后一个
        this.phoneNumber = S.substring(0, S.length - 1)
      },
      //处理清空键
      _handleClearKey () {
        this.phoneNumber = ''
      },
      _handleConfirmKey () {
        let S = this.phoneNumber
        //未输入
        if (!S.length) {
          // alert('您目前未输入!')
          this.$message.warning("请输入号码")
          return false
        }
        //将 8. 这种转换成 8.00
     /*   if (S.indexOf('.') > -1 && S.indexOf('.') == (S.length - 1)) {
          S = Number(S.substring(0, S.length - 1)).toFixed(2)
        }*/
        //保留两位
        // S = Number(S).toFixed(2)
        this.$emit('DialpadchildConfirm', S)
        this.phoneNumber = ''
        this.handleClose()

        // this.IntercomGroup = false
      },
      //处理数字
      _handleNumberKey (num) {
        let S = this.phoneNumber
        //如果有小数点且小数点位数不小于2
        /* if (S.indexOf('.') > -1 && S.substring(S.indexOf('.') + 1).length < 2) {
           this.phoneNumber = S + num
         }*/
        //没有小数点
        if (!(S.indexOf('.') > -1)) {
          //如果第一位是0，只能输入小数点
          /*  if (num == 0 && S.length == 0) {
              this.phoneNumber = '0.'
            } else {
              if (S.length && Number(S.charAt(0)) === 0) return
              this.phoneNumber = S + num
            }*/
          // if (S.length && Number(S.charAt(0)) === 0) return
          this.phoneNumber = S + num
        }
      }
    }
  }
</script>

<style scoped>
  /deep/ .el-icon-close:before {
    font-size: 25px;
  }
  /deep/ .el-input__inner{
    font-size: 18px;
  }
  /deep/ .el-dialog__title {
    font-size: 24px;
  }
  /deep/ .el-checkbox__inner {
    height: 35px;
    width: 35px;
  }
  .key-container {
    display: inline-block;
    /*height: 100%;*/
    height: 600px;
    width: 100%;
  }

  .bottom-line {
    max-width: 500px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }

  .telBox-container {
    /*width: 60%;*/
    max-width: inherit;
    /*background-color: yellow;*/
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }

  .title-container {
    /*background-color: yellow;*/
    /*  position: relative;
      left: 50%;
      transform: translateX(-50%);*/
  }

  .input-container {
    /*background-color: #585656;*/
    height: 50px;
    margin: 0 auto;
    /*overflow: auto;*/
    max-width: 450px;
  }

  .del-right {
    display: inline-block;
    float: right;
    /* position: relative;
     left: 30%;*/
    line-height: 50px;
  }

  .dia-delete {
    cursor: pointer;
    display: inline-block;
    width: 60px;
    height: 40px;
    background: url(../../assets/images/newIcon/dia-delete.png) no-repeat;
    background-size: 100% 100%;
    float: right;
  }

  .input-box {
    display: inline-block;
    font-size: 45px;
    font-weight: bold;
    /*min-width: 200px;*/
    line-height: 50px;
    white-space: nowrap;
    max-width: 350px;
    overflow: hidden;
  }

  .keyboard-container {
    /*display: flex;*/
    /*flex-direction: row;*/

  }

  .keyboard {
    max-width: 450px;
    /*display: flex;*/
    /*flex-direction: row;*/
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    /*background-color: #b60909;*/

  }

  .key-row {
    display: flex;
    /*border: #2c3e50 1px solid;*/
    /*justify-content: space-between;*/
    flex-direction: row;
  }
.key-rowBtn{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
  .key-cell {
    height: 80px;
    width: 200px;
    margin: 10px 10px;
    border: #a09f9f 1px solid;
    /*justify-content: space-between;*/
    text-align: center;
    line-height: 80px;
    cursor: pointer;
    background-color: #F2F2F2;
    font-size: 50px;
  }
  .key-cell:hover{
    background-color: #D7D7D7;
  }

  .isChooseD {
    height: 70px;
    background-color: #D7D7D7;
    text-align: center;
  }
  .bhpImg{
    height: 50px;
    width: 70px;
    cursor: pointer;
  }


  .number-text {
    display: flex;
    margin-left: 1%;
    line-height: 70px;
  }
  .ipVoice{
    background-color: #00A0E9;
    color: #F1F1F1;
    height: 80px;
    width: 200px;
    margin: 10px 10px;
    border: #a09f9f 1px solid;
    /*justify-content: space-between;*/
    text-align: center;
    line-height: 80px;
    cursor: pointer;
    font-size: 18px;
  }
  /deep/ .el-dialog__wrapper /deep/ .el-dialog  /deep/ .el-dialog__title {
    font-size: 30px;
  }
  /deep/ .el-dialog__wrapper /deep/ .el-dialog /deep/ .el-icon-close:before {
    font-size: 30px;
  }
</style>
<style>
   .el-dialog__wrapper.el-dialog__title {
    font-size: 30px;
  }
   .el-dialog__wrapper  .el-icon-close:before {
    font-size: 30px;
  }
</style>
